<template>
	<view>
		<view class="love-box" v-if="list.length">
			<div class="box-item" @click.stop="goTo(item)" v-for="(item,index) in list" :key="index">
				<div class="left">
					<image :src="item.snapshot.pic_url" mode=""></image>
				</div>
				<div class="right">
					<div class="title u-line-2 ">
						{{item.snapshot.goods_name}}
					</div>
					<div class="bottom">
						<div class="lf">
							￥<text>{{item.snapshot.price}}</text>
						</div>
						<div class="rh" @click.stop="cancelFav(item)">
							取消收藏
						</div>
					</div>
				</div>
			</div>
		</view>
		<div v-else style="padding-top: 100rpx;">
			<u-empty margin-top="50rpx" mode="list"></u-empty>
		</div>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			};
		},
		methods: {
			async getList() {
				this.$api.my.collectList().then((res) => {
					this.list = res.data.list.data||[]
				}).catch(err=>{
					this.list = []
				})
			},
			cancelFav(info) {
				console.log(info, 'xxxxxxxxx');
				this.$api.my.collect({
					goods_id: info.goods_id,
					type: info.type
				}).then((res) => {
					setTimeout(() => {
						this.$toast(res.message)
					}, 100)
					this.getList()
				})
			},
			goTo(item){
				const types = {
					2:'jd',
					3:'pdd'
				}
				if(item.type==1){
					uni.navigateTo({
						url: '/pages/goods/detail?goodsId=' + item.goods_id
					})
				}else{
					uni.navigateTo({
						url: `/pageC/goods/goods?id=${item.goods_id}&type=${types[item.type]}`  
					})
				}
			}
		},
		onLoad() {
			this.getList()
		}
	}
</script>

<style lang="scss">
	.love-box {
		padding: 24rpx;
		background-color: #fff;

		.box-item {
			display: flex;
			align-items: center;
			background-color: #fff;

			.left {
				width: 200rpx;
				height: 200rpx;
				// background: #EEEEEE;
				border-radius: 16rpx;
				overflow: hidden;
				margin-right: 24rpx;
				margin-bottom: 16rpx;

				>image {
					width: 100%;
					height: 100%;
				}
			}

			.right {
				flex: 1;

				.title {
					font-weight: 400;
					font-size: 26rpx;
					color: #333130;
					margin-bottom: 68rpx;
				}

				.bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.lf {
						>text {
							font-size: 36rpx;
							font-weight: bold;
						}
					}

					.rh {
						font-weight: 400;
						font-size: 24rpx;
						color: #FF8C19;
					}
				}
			}

		}
	}
</style>